<template>
  <div>
    <div class="member" v-if="$store.getters['user/isLogin']">
      <div class="header-con">
        <router-link to="my/login">
          <div class="header-con-content">
            <div class="icon-border">
              <img src="../assets/images/avatar_default.png" alt="">
            </div>
            <div>
              <p class="text">用户名是:{{$store.state.user.username}}</p>
            </div>
          </div>
        </router-link>
      </div>
      <ul class="mui-table-view">

        <li class="mui-table-view-cell mui-media">
          <a href="javascript:;" class="">
            <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png">
            <div class="mui-media-body">我的订单
              <!-- <p class="mui-ellipsis"></p> -->
            </div>
          </a>
        </li>

        <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png">
            <div class="mui-media-body">
              收货地址
              <!-- <p class="mui-ellipsis"></p> -->
            </div>
          </a>
        </li>

        <li class="mui-table-view-cell mui-media">
          <a href="javascript:;" @click="logout()">
            <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png">
            <div class="mui-media-body" style="">
              退出登录
              <!-- <p class="mui-ellipsis"></p> -->
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 分隔线 -->
    <div class="member" v-else>
      <div class="header-con">
        <router-link to="my/login">
          <div class="header-con-content">
            <div class="icon-border">
              <img src="../assets/images/avatar_default.png" alt="">
            </div>
            <div>
              <p class="text">登录/注册</p>
            </div>
          </div>
        </router-link>
      </div>
      <div class="content-con"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'My',
  methods: {
    logout () {
      // 连接地址,进行退出
      this.$http.get('logout')
      // 清除setAuthorization里面的信息
      this.$auth.setAuthorization('')
      //
      this.$store.commit('user/logout')
      // 提示
      this.$toast('退出登录')
      // 编程式导航
      this.$router.push('/my')
    }
  }
}
</script>

<style lang="scss" scoped>
.mui-media-body{
  line-height:50px
}
.header-con {
  width: 100%;
  height: 115px;
  background-color: white;
  .header-con-content {
    position: relative;
    background: linear-gradient(90deg, #28a2ff, #ffd787);
    height: 105px;
    width: 98%;
    top: 5px;
    left: 1%;
    border-radius: 10px;
    .icon-border {
      position: absolute;
      top: 13px;
      left: 8%;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 0 0.1rem 0.25rem#f8e3c6;
      overflow: hidden;
      border: 1px solid hsla(0, 0%, 100%, 0.4);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      position: absolute;
      left: 40%;
      top: 40px;
      color: white;
      font-size: 19px;
    }
  }
}
</style>
